<!--
 * @Description: 
 * @Author: 呆龙
 * @Date: 2023-09-07 14:31:54
 * @LastEditTime: 2023-09-20 09:22:49
 * @LastEditors: 呆龙
-->
<template>
  <!-- vue3页面 -->
  <a-card class="action">
    <a-row :gutter="24" align="middle">
      <a-col class="gutter-row" :span="6">
        <a-date-picker
          v-model:value="params.year"
          picker="year"
          placeholder="选择年份"
          valueFormat="YYYY"
        />
      </a-col>
      <a-col class="gutter-row" :span="7">
        <a-select
          ref="select"
          v-model:value="params.term"
          style="width: 100%"
          @change="handleChange"
          placeholder="请选择届数"
        >
          <a-select-option value="一">一届</a-select-option>
          <a-select-option value="二">二届</a-select-option>
          <a-select-option value="三">三届</a-select-option>
          <a-select-option value="四">四届</a-select-option>
          <a-select-option value="五">五届</a-select-option>
        </a-select>
      </a-col>
      <a-col class="gutter-row" :span="7">
        <a-select
          ref="select"
          v-model:value="params.number"
          style="width: 100%"
          @change="handleChange"
          placeholder="请选择次数"
        >
          <a-select-option value="一">第一次</a-select-option>
          <a-select-option value="二">第二次</a-select-option>
          <a-select-option value="三">第三次</a-select-option>
          <a-select-option value="四">第四次</a-select-option>
        </a-select>
      </a-col>
      <a-col class="gutter-row" :span="4">
        <div class="gutter-box">
          <a-button type="primary" @click="getSession()">
            <template #icon>
              <search-outlined />
            </template>
          </a-button>
          <a-button type="primary" class="add" @click="visibleModify = true">
            <template #icon><plus-outlined /></template>
            新建届次
          </a-button>
        </div>
      </a-col>
    </a-row>
  </a-card>
  <tableDai
    :useNumber="true"
    :columns="columns"
    :table-data="dataList"
    :current="1"
    :loading="loading"
    :total="dataList.length"
    use-action
  />
  <MyModify
    title="修改届次"
    :isEdit="isEdit"
    :visibleModify="visibleModify"
    :editData="editData"
    @closeDrawer="
      (visibleModify = false),
        (isEdit = false),
        (async () => {
          await getSession();
        })()
    "
  />
</template>

<script setup lang="ts">
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { ref, onMounted, createVNode } from "vue";
import { SearchOutlined, PlusOutlined } from "@ant-design/icons-vue";
import tableDai from "../components/CommonDai/Table.vue";
import { Params } from "@/api/teachers";
import { Switch, Modal, Button, message } from "ant-design-vue";
import { forEach } from "lodash";
import MyModify from "./common/modifyModel.vue";
import { Session, editSession, delSession } from "@/api/teachers";

onMounted(async () => {
  await getSession();
});

const getSession = async () => {
  // loading.value = true;
  // const sessionRes = await getSessionAll({ ...params.value });
  // dataList.value = sessionRes.result.records as Session[];
  // loading.value = false;
};

const dataList = ref<Session[]>([]);
const visibleModify = ref(false);
const loading = ref(false);
const params = ref<Params>({
  current: 1,
  size: 10,
  isOpen: undefined,
  number: undefined,
  term: undefined,
  year: undefined,
});

const editData = ref<Session>();
const isEdit = ref(false);

const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};

const columns = [
  {
    title: "教代会年份",
    dataIndex: "year",
    key: "year",
    align: "center",
    isShow: true,
  },
  {
    title: "教代会届数",
    dataIndex: "term",
    key: "term",
    align: "center",
    customRender: ({ text }: any) => {
      return "第" + text + "届";
    },
    isShow: true,
  },
  {
    title: "次数",
    dataIndex: "number",
    key: "number",
    align: "center",
    customRender: ({ text }: any) => {
      return "第" + text + "次";
    },
    isShow: true,
  },

  {
    title: "描述",
    dataIndex: "description",
    key: "description",
    align: "center",
    width: 400,
    customCell: () => {
      return {
        style: {
          maxWidth: "200px",
          overflow: "hidden",
          whiteSpace: "nowrap",
          textOverflow: "ellipsis",
          cursor: "pointer",
        },
      };
    },
    isShow: true,
  },
  {
    title: "创建日期",
    dataIndex: "createTime",
    key: "createTime",
    align: "center",
    isShow: true,
  },
  {
    title: "开启状态",
    dataIndex: "isOpen",
    key: "isOpen",
    align: "center",
    isShow: true,
    customRender: ({ text, record }: any) => {
      return createVNode(
        Switch,
        {
          checkedValue: !text,
          onChange: (checked: boolean) => {
            Modal.confirm({
              title: checked
                ? "您确定要打开教代会吗!"
                : "您确定要关闭教代会吗!",
              icon: createVNode(ExclamationCircleOutlined),
              style: {
                top: "30%",
              },
              onOk() {
                dataList.value = forEach(dataList.value, (item: Session) => {
                  if (item.id === record.id) {
                    item.isOpen = +checked;
                  }
                });
                editSession(record).then((res: any) => {
                  console.log(res);
                  message.success("操作成功!");
                });
              },
            });
          },
        },
        ""
      );
    },
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    isShow: true,
    width: 100,
    customRender: ({ record }: any) => {
      return createVNode(
        "div",
        {
          style: {
            display: "flex",
            justifyContent: "space-between",
          },
        },
        [
          createVNode(
            Button,
            {
              type: "link",
              size: "small",
              onClick: () => {
                isEdit.value = true;
                editData.value = record;
                visibleModify.value = true;
              },
            },
            () => "编辑"
          ),
          createVNode(
            Button,
            {
              type: "link",
              danger: true,
              size: "small",
              onClick: () => {
                Modal.confirm({
                  title: "您确定要删除吗?",
                  style: {
                    top: "30%",
                  },
                  onOk() {
                    delSession([record.id]).then((res: any) => {
                      if (res.code === 200) {
                        getSession();
                        message.success("删除成功!");
                      }
                    });
                  },
                });
              },
            },
            () => "删除"
          ),
        ]
      );
    },
  },
];
</script>

<style scoped lang="less">
:deep(.ant-picker) {
  width: 100%;
}
:deep(.ant-select) {
  width: 100%;
}
.gutter-box {
  justify-content: space-between;
  .add;
}
.add {
  display: flex;
  align-items: center;
}
:deep(svg) {
  vertical-align: middle;
}
</style>
